<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <link th:replace="layout :: head"/>
</head>

<body style="height:100%;">
<div class="layui-fluid">
    <form id="queryFormRoom" class="layui-form">
        <div class="layui-card">
            <div class="layui-card-header">
                <span>房间列表</span>
            </div>
            <div class="layui-card-body layui-row layui-col-space10">

                <div class="layui-col-md4">
                    <div class="form-title">房间ID</div>
                    <div class="form-input">
                        <input type="text" name="roomId" maxlength="300" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="form-title">用户ID</div>
                    <div class="form-input">
                        <input type="text" name="userId" maxlength="300" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="form-title"></div>
                    <div class="form-input">
                        <button type="button" class="layui-btn layui-btn-sm" lay-filter="query" id="query">搜索</button>
                        <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">重置</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="layui-col-md12">
    <div class="layui-card">
        <div class="layui-card-body">
            <div th:replace="layout :: totalWithId(total)"></div>

            <table class="layui-table" lay-filter="listTableRoom" id="listTableRoom">
                <thead>
                <tr>
                    <th lay-data="{field:'roomId'}">房间ID</th>
                    <th lay-data="{field:'owner'}">创建者</th>
                    <th lay-data="{field:'size'}">房间在线人数</th>
                    <th lay-data="{field:'capacity'}">房间上限人数</th>
                    <th lay-data="{field:'ttl' , templet: '#ttlTpl'}">房间有效时长(小时)</th>
                    <th lay-data="{field:'createdDate'}">创建时间</th>
                    <th lay-data="{fixed: 'right',  align: 'center', toolbar: '#operationTpl'}">操作</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<!--模态框-->
<div class="model showme-hidden" id="userModel">
    <form class="layui-form layui-form-pane" id="userForm" lay-filter="userForm">
        <div class="layui-card">
            <div class="layui-card-header">
                <span>房间id:</span>
                <span id="spanRoomId"></span>
            </div>
            <div class="layui-card-body layui-row layui-col-space10">
                <div class="layui-col-md4">
                    <div class="form-title" style="width: 50px">用户ID</div>
                    <div class="form-input">
                        <input type="hidden" name="roomId" id="roomId" class="not-clear">
                        <input type="text" name="userId" maxlength="300" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="form-title"></div>
                    <div class="form-input" style="padding-left: 100px;">
                        <button type="button" class="layui-btn layui-btn-sm" lay-filter="queryUser" id="queryUser">搜索</button>
                        <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">重置</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-body">
                <table class="layui-table" lay-filter="listTableUser" id="listTableUser">
                    <thead>
                    <tr>
                        <th lay-data="{field:'key'}">用户ID</th>
                        <th lay-data="{field:'value'}">进入时间</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="operationTpl">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="showUser">查看成员</a>
</script>
<script th:replace="layout :: script"></script>
<script th:src="@{/js/room/roomList.js}" type="text/javascript"></script>

<!--房间有效时长(小时)-->
<script type="text/html" id="ttlTpl">
    {{#  if(d.ttl != -1){ }}
    <span> {{ Number(d.ttl) * 24 }} </span>
    {{#  }else{ }}
    <span> - </span>
    {{#  } }}
</script>
</body>
</html>
